<template>
  <div class="post-item">
    <!-- 头部 -->
    <div class="post-header">
        <div class="user-info">
            <img :src="avatarUrl" alt="头像" class="avatar" />
            <div>
            <div class="username">{{ post.author }}</div>
            <div class="post-time">{{ formatDate(post.createdAt) }}</div>
            </div>
        </div>
        <div class="post-type-tag" :class="post.postType === 'QUESTION' ? 'question' : 'normal'">
            {{ post.postType === 'QUESTION' ? '问答' : '普通' }}
        </div>
    </div>

    <!-- 内容 -->
    <div class="post-content">
        <h3 @click="viewPost">{{ post.title }}</h3>
        <p>{{ post.content.slice(0, 150) }}{{ post.content.length > 150 ? '...' : '' }}</p>
        <div class="post-images" v-if="post.images?.length">
            <img
            v-for="(img, idx) in post.images.slice(0, 3)"
            :key="idx"
            :src="img"
                class="post-image"
            />
        </div>

        <div class="post-tags">
        <span v-for="(tag, idx) in resolvePostTags(post.typeId)" :key="idx" class="tag">{{ tag }}</span>
        </div>

    </div>

    <!-- 统计信息 -->
    <div class="post-stats">
        <div class="stat-item" @click="toggleLike">
            <i class="fa fa-thumbs-up" :class="{ liked: isLiked }"></i> <span>{{ post.likes }}</span>
        </div>
        <!-- ✅ 修改为 -->
        <div class="stat-item" @click="viewPost">
          <i class="fa fa-comment"></i> <span>{{ post.commentCount || 0 }}</span>
        </div>
        <div class="stat-item" @click="toggleFavorite">
            <i class="fa fa-star" :class="{ favorited: isFavorited }"></i> <span>{{ post.favorites || 0 }}</span>
        </div>
        <div class="stat-item">
            <i class="fa fa-eye"></i> <span>{{ post.views || 0 }}</span>
        </div>
      </div>
      <!-- 操作按钮（仅当前用户自己的帖子显示） -->
      <div class="post-actions" v-if="isMyPost">
        <button class="delete-btn" @click="deletePost">删除</button>
      </div>
      
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { usePostStore } from '@/stores/post'
import { resolvePostTags } from '@/utils/postTypes'


const props = defineProps({
  post: Object
})
const tags = computed(() => resolvePostTags(props.post.typeId))
const router = useRouter()
const userStore = useUserStore()
const postStore = usePostStore()
const user = computed(() => userStore.user)

const avatarUrl = computed(() => {
  const found = userStore.users.find(u => u.username === props.post.author)
  return found?.avatar || '/default-avatar.png'
})

const formatDate = (d) => new Date(d).toLocaleDateString()

const viewPost = () => {
  router.push({ name: 'PostDetail', params: { id: props.post.knowledgeId } })
}

const toggleLike = () => {
  if (!user.value) return
  postStore.toggleLike(props.post.knowledgeId, user.value.userId)
}

const toggleFavorite = () => {
  if (!user.value) return
  postStore.toggleFavorite(props.post.knowledgeId, user.value.userId)
}

const isFavorited = computed(() =>
  props.post.favoritedBy?.includes(String(user.value?.userId))
)

const isLiked = computed(() =>
  props.post.likedBy?.includes(String(user.value?.userId))
)

const isMyPost = computed(() => {
  return user.value?.userId === props.post.userId
})


const deletePost = () => {
  if (confirm('确定删除该帖子？')) {
    postStore.deletePost(props.post.knowledgeId)
  }
}
</script>

<style scoped>
.post-item {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 6px;
  transition: box-shadow 0.3s;
}
.post-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.post-time {
  font-size: 12px;
  color: #888;
}
.post-type-tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.post-type-tag.question {
  background-color: #fff3cd;
  color: #856404;
}
.post-type-tag.normal {
  background-color: #e2e3e5;
  color: #383d41;
}
.post-content h3 {
  cursor: pointer;
  color: #2c3e50;
  margin-bottom: 8px;
}
.post-content h3:hover {
  text-decoration: underline;
}
.post-images {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.post-image {
  width: 100px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}
.post-stats {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  color: #666;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.stat-item:hover {
  color: #2196F3;
}
.liked {
  color: #2196F3;
}
.favorited {
  color: #FFC107;
}
.post-tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  background-color: #f0f0f0;
  color: #333;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
}

.post-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

.edit-btn,
.delete-btn {
  padding: 6px 12px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s ease;
}

.edit-btn {
  background-color: #409EFF;
  color: #fff;
}
.edit-btn:hover {
  background-color: #2b85e4;
}

.delete-btn {
  background-color: #f56c6c;
  color: #fff;
}
.delete-btn:hover {
  background-color: #dd6161;
}
</style>
